<template>
 <div class="home-cate-list">
    <van-swipe :autoplay="3000" lazy-render class="home-swiper">
        <van-swipe-item >
            <van-grid square :column-num="5">
                <van-grid-item v-for="item in cateList1" :key="item.id">
                    <van-image style="width: 42px; height: 42px;" :src="item.imgUrl" />
                    <p class="cate-list-text">{{ item.text }}</p>
                </van-grid-item>
            </van-grid>
        </van-swipe-item>
        <van-swipe-item >
            <van-grid square :column-num="5">
                <van-grid-item v-for="item in cateList2" :key="item.id">
                    <van-image style="width: 42px; height: 42px;" :src="item.imgUrl" />
                    <p class="cate-list-text">{{ item.text }}</p>
                </van-grid-item>
            </van-grid>
        </van-swipe-item>
    </van-swipe>
 </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
interface CateGoods {
    id: number
  text: string
  imgUrl: string
}
const cateList1 = ref<CateGoods[]>([
  { id: 1, text: '京东超市', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 2, text: '数码电器', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png' },
  { id: 3, text: '京东新百货', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png' },
  { id: 4, text: '京东生鲜', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png' },
  { id: 5, text: '京东到家', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png' },
  { id: 6, text: '充值缴费', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png' },
  { id: 7, text: '附近好店', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png' },
  { id: 8, text: 'plus会员', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png' },
  { id: 9, text: '京东国际', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png' },
  { id: 10, text: '京东拍卖', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/186882/8/12149/5894/60ec1250E9335241a/b22054613aa8ae75.png' }
])

const cateList2 = ref<CateGoods[]>([
  { id: 1, text: '京东超市', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/145692/9/1817/4493/5efbf652E61c4f3ec/722840c121d67fc6.png' },
  { id: 2, text: '数码电器', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/185282/10/13877/6658/60ec1404E0fc4061a/a7c213f76e37a8d6.png' },
  { id: 3, text: '京东新百货', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/182378/35/13924/7463/60ec14c6E1f434a60/37fba58239f3547e.png' },
  { id: 4, text: '京东生鲜', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191377/35/12864/5624/60ec146cE304517a9/20acb632f59fbbbd.png' },
  { id: 5, text: '京东到家', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/36551/10/16098/5792/60ec1589E755822d7/f958b896e706008a.png' },
  { id: 6, text: '充值缴费', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 7, text: '附近好店', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png' },
  { id: 8, text: 'plus会员', imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/192665/22/12752/7912/60ec15cbE261a32bf/3ace51badf80e71b.png' },
  
])
</script>

<style scoped>
.home-cate-list{
    margin-top: 40px;
    background-color: #f6f6f6!important;
}
.cate-list-text{
    font-size: 12px;
}
.home-swiper {
  padding-bottom: 20px;
  background-color: #f6f6f6!important;
}

</style>